<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
		<!-- 元素样式操作，针对css样式的属性和属性值
		 css()			功能：添加任何样式下的属性和属性值
						1个参:获取匹配集合元素第一个元素的css属性值
						2个参:设置匹配集合元素中所有元素的属性和属性值
						n个参:多层设置匹配集合元素中所有元素的属性和属性值
						语法糖：css({"属性"："属性值","属性"："属性值"})
						.btn{
							border: 1px solid red;
						}
		 height()和width()    功能：匹配集合元素中第一个元素的高度和宽度值
							  无参：获取匹配集合元素中第一个元素的高度和宽度值
							  有参：设置匹配集合元素中第一个元素的高度和宽度值
		 outerHeight()和outerWidth()
							  功能：元素的宽高度
							  无参：获取元素宽高度，包含内边距+边框
							  有参：只允许传bool值，true 外加一个外边距
		 -->
		 <style>
			 .box{
				 background-color: aqua;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid red;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: 700;
			 }
			 
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构  创建两个div    6个button -->
		<!-- .box添加样式属性：背景色，内外边距：20px，边框5px
			 .result添加样式属性，上外边距：10px，字体加粗
			 jq框架引入
		-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取宽度</button>
		<button id="gpbBtn">获取元素高度【包含:内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包括:内边距+边框+外边距】</button>
		<div id="result" class="result"></div>
		<script>
			/* 1.点击  获取背景颜色  按钮  获取背景颜色 */
			$("#getColorBtn").click(function(){
				// jq  css("属性名")  获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取的颜色属性值是什么
				$("#result").text("获取背景颜色值是："+bgColor);
			});
			/* 2.点击  设置背景颜色  按钮  设置背景颜色值 */
			$("#setColorBtn").click(function(){
				//.box添加颜色  橙色
				$(".box").css("background-color","orange");
				//#result  添加文本：效果修改为橙色
				$("#result").text("效果已经修改为橙色")
			});
			/* 点击 设置多层效果 按钮  设置效果如下：背景色、倒角，盒子阴影 */
			$("#setBtn").click(function(){
				//.box添加颜色  橙色
				$(".box").css({"background-color":"orange",
							  "border-radius":"50%",
							  "box-shadow":"5px 5px 10px #0ff",
							  "height":"300px",
							  "width":"300px",
							  "background-image":"url(../img/2.png)",
							  "background-size":"100% 100%"
							  });
			});
			/* 4. 点击  获取元素宽度  按你牛  获取当前元素的宽高*/
			$("#getWidthBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取的宽度是："+w+"px");
			});
			/* 5.点击 获取元素高度[...] 按钮   */
			$("#gpbBtn").click(function(){
				var gpb=$(".box").outerHeight();
				$("#result").text("高度为："+gpb+"px");
			});
			/* 6.点击  获取元素高度[...] 按钮  传参bool */
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("实际高度："+bpm+"px");
			});
		</script>
	</body>
</html>